<template>
  <div class="add-form">
    <el-dialog
      title="题目预览"
      :visible.sync="dialogPreview"
      @close="dialogPreviewClose"
      width="80%"
    >
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【题型】：
            <span v-if="questionMessage.questionType == 1">单选题</span>
            <span v-else-if="questionMessage.questionType == 2">多选题</span>
            <span v-else>简答题</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            【编号】：{{ questionMessage.id }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【难度】：
            <span v-if="questionMessage.difficulty == 1">简单</span>
            <span v-else-if="questionMessage.difficulty == 2">一般</span>
            <span v-else>困难</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            【标签】：{{ questionMessage.tags }}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【学科】：{{ questionMessage.subjectName }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            【目录】：{{ questionMessage.directoryName }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【方向】：{{ questionMessage.direction }}
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <div>【题干】：</div>
      </el-row>
      <el-row v-html="questionMessage.question">
        <div>{{ questionMessage.question }}</div>
      </el-row>
      <el-row>
        <div>
          <span v-if="questionMessage.questionType == 1"
            >单选题 选项：（以下选中的选项为正确答案）</span
          >
          <span v-else-if="questionMessage.questionType == 2"
            >多选题 选项：（以下选中的选项为正确答案）</span
          >
        </div>
      </el-row>
      <el-radio-group v-model="radio" v-if="questionMessage.questionType == 1">
        <el-radio
          v-for="item in questionMessage.options"
          :key="item.id"
          :label="item.title"
          :value="item.code"
        ></el-radio>
      </el-radio-group>
      <el-checkbox-group
        v-model="checkList"
        v-else-if="questionMessage.questionType == 2"
      >
        <el-checkbox
          v-for="item in questionMessage.options"
          :key="item.id"
          :label="item.title"
          :value="item.code"
        ></el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-row>
        <div>
          【参考答案】：
          <el-button type="danger" @click="checkVideoFun = true"
            >视频答案预览</el-button
          >
          <!-- 视频弹出窗口时 -->
          <div style="margin-top: 20px">
            <video
              :src="questionMessage.videoURL"
              controls
              width="50%"
              height="50%"
              v-if="checkVideoFun"
            ></video>
          </div>
        </div>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        【答案解析】：<span v-html="questionMessage.answer" id="aaa">{{
          questionMessage.answer
        }}</span>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        【题目备注】：<span v-html="questionMessage.remarks">{{
          questionMessage.remarks
        }}</span>
      </el-row>
      <el-button
        class="close"
        type="primary"
        size="small"
        @click="dialogPreviewClose"
        >关闭</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'questionsPreview',
  data () {
    return {
      dialogPreview: false, // 试题预览对话框
      radio: 1, // 单选的正确答案
      checkList: [], // 多选的正确答案
      questionMessage: {}, // 预览问题所有的信息
      checkVideoFun: false // 视频弹出窗口
    }
  },
  filters: {
    changeValue (value) {
      if (value !== undefined) {
        value = value.replace('<p>', '')
        value = value.replace('</p>', '')
      }
      return value
    }
  },
  methods: {
    // 打开对话框
    async dialogPreviewOpen (row) {
      const { data } = await detail(row)
      this.questionMessage = data
      this.radio = data
      // 通过判断数据中isRight是否为1，来判断这个答案是否正确
      this.questionMessage.options.forEach(item => {
        if (item.isRight === 1 && this.questionMessage.questionType === '1') {
          console.log(11)
          this.radio = item.title
        } else if (item.isRight === 1 && this.questionMessage.questionType === '2') {
          // console.log(item.title)
          this.checkList.push(item.title)
        }
      })
      // console.log(this.checkList)
      this.dialogPreview = true
    },
    // 关闭对话框
    dialogPreviewClose () {
      this.dialogPreview = false
      this.checkVideoFun = false
    }
  }
}
</script>

<style scoped lang='less'></style>
